<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 离线 Google 字体: Source Sans Pro -->
    <link rel="stylesheet" th:href="@{/AdminLTE/css/google.css?family=Source+Sans+Pro:300,400,400i,700&display=fallback}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">
    <!-- bootstarp table -->
    <link rel="stylesheet" th:href="@{/plugins/bootstrap-table/bootstrap-table.min.css}">
    <!-- sweetalert2 -->
    <link rel="stylesheet" th:href="@{/plugins/sweetalert2/sweetalert2.css}">
    <!-- 主题样式 -->
    <link rel="stylesheet" th:href="@{/AdminLTE/css/adminlte.min.css}">
</head>
<body>
用户管理
<div class="card-body">
    <div class="search row">
        <form>
            <input placeholder="请输入要搜索的用户名" id="search-username"/>
            <input placeholder="请输入要搜索的真实姓名" id="search-name"/>
            <input placeholder="请输入要搜索的手机号" id="search-phone"/>
            <button class="btn btn-primary btn-sm btn-reset" type="reset">重置</button>
            <button class="btn btn-primary btn-sm btn-search" type="button">搜索</button>
        </form>
    </div>
    <button type="button" class="btn btn-success" id="btn-add" data-toggle="modal" data-target="#modal-default" data-title="添加用户">
        添加用户
    </button>

    <table id="myTable"></table>

    <div class="modal fade" id="modal-default" data-backdrop="static" style="display: none;" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">添加用户</h4>
                    <button type="button close-btn" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- 竖排表单 -->
                    <!--                        <div class="card-header">-->
                    <!--                            <h3 class="card-title">竖排表单</h3>-->
                    <!--                        </div>-->
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form class="form-horizontal" name="myForm" id="myForm">
                        <div class="card-body">
                            <div class="input-group row row-id">
                                <label for="username" class="col-sm-2 col-form-label">id</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="id" name="id" placeholder="id" readonly>
                                </div>
                            </div>
                            <div class="input-group row">
                                <label for="username" class="col-sm-2 col-form-label">邮箱</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" id="username" name="username" placeholder="邮箱">
                                </div>
                            </div>
                            <div class="input-group row row-password">
                                <label for="password" class="col-sm-2 col-form-label">密码</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                                </div>
                            </div>
                            <div class="input-group row row-repassword">
                                <label for="repassword" class="col-sm-2 col-form-label">确认密码</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" id="repassword" name="repassword" placeholder="确认密码">
                                </div>
                            </div>
                            <div class="input-group row">
                                <label for="name" class="col-sm-2 col-form-label">真实姓名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="确认密码">
                                </div>
                            </div>
                            <div class="input-group row">
                                <label for="phone" class="col-sm-2 col-form-label">手机号</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="phone" name="phone" placeholder="确认密码">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary add-user">提交</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

</div>
<!-- /.card-body -->

<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- Bootstrap table 4 -->
<script th:src="@{/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js}"></script>
<!-- jquery-validation -->
<script th:src="@{/plugins/jquery-validation/jquery.validate.min.js}"></script>
<script th:src="@{/plugins/jquery-validation/additional-methods.js}"></script>
<!-- md5 -->
<script th:src="@{/service/js/md5.js}"></script>
<!-- sweetalert2 -->
<script th:src="@{/plugins/sweetalert2/sweetalert2.all.js}"></script>
<!-- 特定页面脚本 -->
<script>

    $(function () {
        // 初始化表格
        let t = $("#myTable").bootstrapTable({
            columns: [
                {
                    checkbox: true,
                },
                {
                    title: "序号",
                    field: "id",
                    formatter: function(value, row, index){
                        return index + 1;
                    }
                },
                {
                    title: "用户名",
                    field: "username",
                    sortable: true,
                    searchable: true
                },
                {
                    title: "密码",
                    field: "password",
                    width: '150px'

                },
                {
                    title: "手机",
                    field: "phone"

                },
                {
                    title: "真实姓名",
                    field: "name",
                    formatter: (value) => {
                        return value.substr(0, 1) + value.replace(/\S/g, "*").substr(1);
                    }
                },
                {
                    title: "操作",
                    field: "id",
                    formatter: (value, row) => {
                        return `<button class='btn btn-primary'  data-title="修改【${row.name}】用户信息"  data-toggle="modal" data-target="#modal-default" onclick='edit(${JSON.stringify(row)})'>编辑</button>
                                <button class='btn btn-danger'>删除</button>`;
                    }
                },
            ],
            url: '/sysuser/list',
            queryParams: function(search){
                return {
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize
                }
            },
            // search: true,
            sortable: true,
            locale: 'zh-CN',
            // 分页
            pagination: true,
            sidePagination: 'server', // 设置服务端分页
            pageNumber: 1,
            pageSize: 2,
            pageList: [1, 2, 5, 10],
            responseHandler: function (res){
                if (res.code == 200){
                    console.log(res.data.total);
                    return {
                        total: res.data.total,
                        rows: res.data.list
                    };
                } else{
                    console.error("请求数据失败");
                    return {
                        total: 0,
                        rows: []
                    }
                }

            }
        });
        // 表格搜索功能
        $(".btn-search").click(function search(){
            let username = $("#search-username").val();
            let name = $("#search-name").val();
            let phone = $("#search-phone").val();

            let params = {query: {}};

            if (username != ""){
                params.query.username = username;
            }
            if (name != ""){
                params.query.name = name;
            }
            if (phone != ""){
                params.query.phone = phone;
            }


            $('#myTable').bootstrapTable('refresh', params);
        });

        // 添加 用户
        $(".add-user").click(() => {
            $('#myForm').submit();
            // 表单 + submitHandler() { 校验  ok --> submitHandler() }
        });

        // 表单验证
        $.validator.setDefaults({
            // 提交请求
            submitHandler: function () {
                let md5 = hex_md5(myForm.password.value) // 加密
                myForm.password.value = md5;

                // ajax 异步提交表单
                $.ajax({
                    type: "post",
                    url: "/sysuser",
                    data: $("#myForm").serialize(),
                    success: function (data){
                        console.log(data);
                        if (data.code == 200){
                            if (myForm.id.value == ""){
                                Swal.fire({
                                    title: '新增成功',
                                    text: '添加用户成功',
                                    type: 'success',
                                    confirmButtonText: '确认'
                                })
                            } else{
                                Swal.fire({
                                    title: '修改成功',
                                    text: '修改用户信息成功',
                                    type: 'success',
                                    confirmButtonText: '确认'
                                })
                            }

                            myForm.reset();
                            $('#modal-default').modal('hide');
                            $('#myTable').bootstrapTable('refresh');
                        } else{
                            alert(data.message);
                        }

                    }
                });
            }
        });
        $('#myForm').validate({
            rules: {
                username: {
                    required: true,
                    email: true,
                },
                password: {
                    required: true,
                    minlength: 6
                },
                repassword: {
                    required: true,
                    equalTo: "#password"
                },
                name: {
                    required: true,
                },
                phone: {
                    required: true,
                    minlength: 11,
                    phone: true
                },
            },
            messages: {
                username: {
                    required: "请输入邮箱地址",
                    email: "邮箱地址不正确"
                },
                password: {
                    required: "请提供密码",
                    minlength: "密码至少 6 个字符"
                },
                repassword: {
                    required: "请输入确认密码",
                    equalTo: "两次密码输入不一致"
                },
                name: {
                    required: "请输入真实姓名",
                },
                phone: {
                    required: "请输入手机号",
                    minlength: "手机号应该是 11 位",
                },
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.input-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });

        // 模态框 新增和修改的弹框
        $('#modal-default').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var recipient = button.data('title') // Extract info from data-* attributes
            var modal = $(this)
            modal.find('.modal-title').text(recipient) // 标题修改
        })

        $("#btn-add").click(() => {
            myForm.reset();
            $(".row-id").css("display", "none");
            $(".row-password").css("display", "flex");
            $(".row-repassword").css("display", "flex");
        });


    });

    function edit(row){
        myForm.reset();
        $(".row-id").css("display", "flex");
        $(".row-password").css("display", "none");
        $(".row-repassword").css("display", "none");
        myForm.id.value = row.id;
        myForm.username.value = row.username;
        myForm.name.value = row.name;
        myForm.phone.value = row.phone;
    }
</script>
</body>
</html>